<template>
  <div id="sider-bar"
       :class="{ 'hide-menu': !leftShow }"
       class="p-animation">
    <el-menu router
             mode="vertical"
             :collapse="!leftShow"
             :collapse-transition="false">
      <sidebar-item v-for="item in treeData"
                    :key="item.menuId"
                    :index="item.path"
                    :item="item" />
    </el-menu>

    <!-- <ul>
      <template v-for="(item) in routersData" >
        <li :key="item.icon" class="menu-active" v-if="item.path == currentPath">
          <router-link :to="item.path" class="p-clear"><span class="p-left">
            <img :src="item.icon1"></span><span class="menu-name p-left p-animation" v-show="leftShow">{{item.name}}</span>
          </router-link>
        </li>
        <li :key="item.icon" v-else :data-text="item.name">
          <router-link :to="item.path" class="p-clear"><span class="p-left">
            <img :src="item.icon1"></span><span class="menu-name p-left p-animation" v-show="leftShow">{{item.name}}</span>
          </router-link>
        </li>
      </template>
    </ul>-->
  </div>
</template>

<script>
// import { getMenusByUserId } from '../../utils/apis/menuApi'
import SidebarItem from '../common/sideBarItem'
import menuItems from './../../utils/menuItems'
export default {
  name: 'siderbar',
  components: { SidebarItem },
  props: {
    leftShow: Boolean
  },
  data () {
    return {
      currentPath: '/',
      tipMsg: '首页',
      topLen: 0,
      // userName: JSON.parse(localStorage.userInfo).userName,
      defaultProps: {
        children: 'childNodes',
        label: 'name'
      },
      routersData: [
      ],
      treeData: []
    }
  },
  created () {
    this.setCurrentPath(this.$route.meta.menuPath)
    this.getMenusTree()
  },
  methods: {
    setCurrentPath (hroutePath) {
      this.currentPath = hroutePath
    },
    linkrouter (obj) {
      this.$router.push({ path: obj.path })
    },
    getMenusTree () {
      this.treeData = menuItems
      // this.treeData = JSON.parse(localStorage.menuTree)
      // getMenusByUserId({ userName: this.userName }).then(res => {
      //   if (res.data.code === 200) {
      //     this.treeData = res.data.data
      //     localStorage.menuTree = JSON.stringify(res.data.data)
      //   }
      // })
    }
  },
  watch: {
    $route (to, from) {
      this.setCurrentPath(to.meta.menuPath)
    }
  }
}
</script>

<style lang="less" scoped>
.hide-menu {
  width: 58px !important;
  .el-submenu__icon-arrow {
    display: none;
  }
}
.menu-tips-box {
  position: fixed;
  border: 1px solid #eeee;
  border-radius: 3px;
  box-shadow: 0px 2px 6px #999;
  top: 0px;
  left: 62px;
  background: #fff;
  color: #999;
  font-size: 12px;
  padding: 8px 8px;
}
#sider-bar {
  height: 100%;
  width: 180px;
  margin-right: 15px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #1c93a7;
  color: #fff;
}
#sider-bar /deep/ .el-menu {
  background: #1c93a7;
  border-right: none;
}
#sider-bar /deep/ .el-menu-item:hover {
  background-color: #24b4ce;
}

#sider-bar /deep/ .el-menu-item:focus {
  background-color: #24b4ce;
}
#sider-bar /deep/.el-menu-item i {
  color: #fff;
}
#sider-bar /deep/ .el-menu-item {
  color: #fff;
}
#sider-bar /deep/ .el-submenu__title {
  color: #fff;
}
#sider-bar /deep/ .el-submenu__title i {
  color: #fff;
}
#sider-bar /deep/ .el-submenu__title:hover:hover {
  background-color: #24b4ce;
}
</style>
<style>
.hide-menu {
  width: 58px !important;
}
.hide-menu span {
  display: none;
}
.hide-menu .el-submenu__icon-arrow {
  display: none;
}
</style>
